import React, {Component} from 'react'
import '$asset/css/admin.less';
import {Form, Input, Button, message} from 'antd';
import { UserApi } from '$api/index'
const FormItem = Form.Item;

class RegistrationForm extends Component {
  constructor(prop) {
    super(prop);
  }
  state = {};

  handleSubmit = (e) => {
    e.preventDefault();
    let { form } = this.props;
    //验证表单 发送数据
    form.validateFieldsAndScroll( async  (err, values) => {
      if (!err) {
        let Rs = await UserApi.AddUser({
          order: values.order,
          username: values.username,
          password: values.password,
        });
        message[Rs.data.error_code === 0 ? 'success' : 'error'](Rs.data.msg);
        if(Rs.data.error_code === 0 ){
           form.resetFields();
        }
      }
    });
  };

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({confirmDirty: this.state.confirmDirty || !!value});
  };
  //验证两次密码是否一致
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], {force: true});
    }
    callback();
  };

  render() {
    const {getFieldDecorator} = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      }
    };

    return (
      <div className="register">
        <div className="register-header">
          <div className="register-header-logo"></div>
        </div>
        <div className="register-container">
          <Form onSubmit={this.handleSubmit}>

            <FormItem
              {...formItemLayout}
              label={(
                <span>用户名</span>
              )}
            >
              {getFieldDecorator('username', {
                rules: [{required: true, message: '请输入您的用户名!', whitespace: true}]
              })(
                <Input  />
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="密码"
            >
              {getFieldDecorator('password', {
                rules: [{
                  required: true, message: '请输入您的密码!'
                }, {
                  validator: this.validateToNextPassword
                },{
                  min:6,
                  message: '不能少于6位'
                },{
                  max:12,
                  message: '不能大于12位'
                }]
              })(
                <Input type="password"/>
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="再次输入："
            >
              {getFieldDecorator('confirm', {
                rules: [{
                  required: true, message: '必填!'
                }, {
                  validator: this.compareToFirstPassword
                }]
              })(
                <Input type="password" onBlur={this.handleConfirmBlur}/>
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="商户名称"
            >
              {getFieldDecorator('order', {
                rules: [{
                  required: true, message: '必填!'
                }]
              })(
                <Input/>
              )}
            </FormItem>

            <Button onClick={this.handleSubmit} style={{marginTop: "12px",width:"90%",marginLeft:"5%"}} type="primary" className="submit login-submit-btn ajax-post">
               提交
            </Button>

          </Form>
        </div>
      </div>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);

export default WrappedRegistrationForm;
